<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>小游戏页面1</title>
    <link rel="stylesheet" href="public/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
    <link rel="stylesheet" href="public/css/main.css">

</head>
<body>
<div class="bodyBox ">
    <div class="swiper-wrapper">

        <div class="swiper-slide d-flex justify-content-center align-items-center">
            <div class="box">
                <div class="title text-center mb-2"><img class="w-75" src="public/imgs/title.png" alt="海南国际车展"></div>
                <div class="stara next text-center"><a href="index2.html"><img class="w-50" src="public/imgs/stara.svg"
                                                                               alt="stara"></a></div>
            </div>
        </div>
        <div class="swiper-slide d-flex justify-content-center align-items-center">
            <div class="box">
                <div class="title d-flex justify-content-center"><img class="w-50" src="public/imgs/youer.svg"
                                                                      alt="你是？"></div>

                <div class="row sexBox">
                    <div class="col-6">
                        <label for="man" class="sexImg d-flex align-items-end justify-content-center"><img class="w-75"
                                                                                                           src="public/imgs/man.svg"
                                                                                                           alt="男"></label>
                        <label class="inputStyle"><input class="radio" id="man" name="sex" type="radio"
                                                         value="man"></label>
                        <label for="man">小哥哥</label>

                    </div>
                    <div class="col-6">
                        <label for="woman" class="sexImg d-flex align-items-end justify-content-center">
                            <img class="w-75" src="public/imgs/woman.svg" alt="男">
                        </label>
                        <label class="inputStyle"><input class="radio" id="woman" name="sex" type="radio" value="woman">
                        </label>
                        <label for="woman">小姐姐</label>
                    </div>
                    <div class="name hide">
                        <label for="name"><input type="text" placeholder="请输入你的大名..." id="name"></label>
                        <label class="tips" for="name">不超过6个字</label>
                    </div>
                    <div class="next hide" id="step1Next"><img src="public/imgs/next.svg" alt="next" >
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide d-flex justify-content-center align-items-center">
            <div class="box">
                <div class="title"><img class="w-50" src="public/imgs/single.svg" alt="你是否单身"></div>


                <div class="checkBox">
                    <label>是
                        <span class="inputStyle"> <input class="radio" type="radio" name="single" value="1"></span>

                    </label>
                    <label>否
                        <span class="inputStyle"><input class="radio" type="radio" name="single" value="2"></span>

                    </label>
                </div>


                <div class="dog hide"><img src="public/imgs/dog.png" alt=""></div>
                <div class="next hide" id="step2Next"><img src="public/imgs/next.svg" alt="next" >
                </div>
            </div>
        </div>
        <div class="swiper-slide d-flex justify-content-center align-items-center">
            <div class="box">
                <div class="title"><img class="w-75" src="public/imgs/most.svg" alt="选车时在意哪一点"></div>
                <div class="checkBox mb-3">
                    <label  class="text-left pl-2">颜值突出
                        <span class="inputStyle"><input class="radio" type="radio" name="most" value="1"></span>
                    </label>
                    <label  class="text-left pl-2">节能环保
                        <span class="inputStyle"><input class="radio" type="radio" name="most" value="2"></span>
                    </label>
                    <label  class="text-left pl-2">空间大
                        <span class="inputStyle"><input class="radio" type="radio" name="most" value="3"></span>
                    </label>
                    <label  class="text-left pl-2">配置高
                        <span class="inputStyle"> <input class="radio" type="radio" name="most" value="4"></span>
                    </label>
                </div>
                <div class="next hide" id="step3Next"><img src="public/imgs/next.svg" alt="next"></div>
            </div>
        </div>
        <div class="swiper-slide d-flex justify-content-center align-items-center">
            <div class="box">
                <div class="title"><img class="w-75" src="public/imgs/like.svg" alt="你喜欢的生活方式是？"></div>
                <div class="checkBox mb-3">
                    <label class="text-left pl-2">傻逼三五好友品茶谈人生
                        <span class="inputStyle"><input class="radio" type="radio" name="like" value="1"></span>
                    </label >
                    <label class="text-left pl-2">成群结队酒吧夜生活
                        <span class="inputStyle"><input class="radio" type="radio" name="like" value="2"></span>
                    </label>
                    <label class="text-left pl-2">独自一人在家做肥宅
                        <span class="inputStyle"> <input class="radio" type="radio" name="like" value="3"></span>
                    </label>
                </div>
                <div class="next hide" id="step4Next"><img src="public/imgs/next.svg" alt="next"></div>
            </div>
        </div>
        <div class="swiper-slide d-flex justify-content-center align-items-center">
            <div class="box">
                <div class="title"><img class="w-75" src="public/imgs/autohainan.svg" alt="海南国际车展"></div>
                <div class="loading hidden">测试结果<br/>计算中...</div>

                <div class="succeed">
                    <div class="people">恭喜:<span>马路杀手</span></div>
                    <div class="car">
                        <p>您适合的车型是:</p>
                        <p class="type">丰田海拉克斯</p>
                    </div>
                    <div class="model">
                        <img src="public/imgs/car.png" class="w-50" alt="汽车模型">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="node_modules/swiper/dist/js/swiper.min.js"></script>
<script src="public/js/common.js"></script>
<script src="public/js/fun.js"></script>
<script>
    var mySwiper = new Swiper('.bodyBox', {
        autoplay: false,//可选选项，自动滑动
        simulateTouch : false,//禁止鼠标模拟
        touchRatio:0,
        navigation: {
            nextEl: '.next img',
        },
    })
</script>
</body>
</html>
